<template>
    <div class="search">
        <div class="searchInput">
            <i class="iconfont icon-fangdajing"></i>
            <input @change="searchValue" v-model="searchtest" type="text" placeholder="搜索歌曲,歌手" />
            <i @click="delValue" class="iconfont icon-tuichu-" v-if="searchtest"></i>
        </div>
        <ul v-if="searchtest" class="list">
            <li v-for="(item, index) in list" :key="index">
                <span>{{item.songname}}</span>
                <span>--</span>
                <span>{{item.singer[0].name}}</span>
            </li>
        </ul>
        <div class="hotSearch" v-if="!searchtest">        
            <h2>热门搜索</h2>
            <span v-for="val in hotkey" :key="val.n" @click="hotsearch(val.k)">
                {{ val.k }}
            </span>
        </div>
        <div class="searchHistory" v-if="!searchtest">
            <h2>搜索历史<i @click="clearsearch" class="iconfont icon-lajitong"></i></h2>
            <div class="search-text">
                <ul>
                    <li @click="clearVa(va)" v-for="va in historylist" :key='va'>{{va}}
                        <i class="iconfont icon-tuichu-"></i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import { getHotSearch, search } from "@/api/search.js";
export default {
    data() {
        return {
            hotkey: [],
            searchtest: "",
            historylist: [],
            list: []
        };
    },
    methods: {
        hotsearch(va) {
            this.searchtest = va;
            search(this.searchtest).then((res) => {
                this.list = res.data.song.list
            });
            let find = this.historylist.find((item) => item == va);
            if (!find) {
                this.historylist.push(va);
            }
            localStorage.setItem("historylist", JSON.stringify(this.historylist));
        },
        searchValue(){
            this.hotsearch(this.searchtest)
        },
        delValue(){
            this.searchtest=""
        },
        clearsearch(){
            this.historylist = []
        },
        clearVa(va){
            let index = this.historylist.filter((item) => item == va);
            this.historylist.splice(index,1);
        }
    },
    mounted() {
        getHotSearch().then((res) => {
            this.hotkey = res.data.hotkey;
        });
    },

};
</script>

<style lang='scss' scoped>
.search {
    width: 100%;
    height: 100%;
    background: #222222;
    overflow: auto;
}
.search .list{
    line-height: 30px;
    padding: 0 30px;
    color: #666;
    overflow: hidden;
    li{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    span{
        padding: 0 5px;
    }
}
.searchInput {
    height: 80px;
    padding: 10px 20px;
    position: relative;
    .icon-fangdajing {
        position: absolute;
        left: 30px;
        top: 22px;
        color: #666;
    }
    input {
        height: 40px;
        background: #333333;
        width: 100%;
        border-radius: 10px;
        padding: 0 34px;
        font-size: 14px;
        color: #fff;
    }
    .icon-tuichu- {
        position: absolute;
        right: 30px;
        top: 22px;
        color: #666;
        font-weight: bolder;
        line-height: 16px;
        text-align: center;
        font-size: 12px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #222;
    }
}
.hotSearch {
    width: 100%;
    padding: 0 20px;
    color: #ffffff80;
    font-size: 14px;
    span {
        padding: 5px 10px;
        color: #ffffff4d;
        background: #333333;
        margin: 5px 20px 10px 0;
        display: inline-block;
        border-radius: 5px;
    }
}
.searchHistory {
    width: 100%;
    height: 200px;
    padding: 0 20px;
    color: #ffffff80;
    font-size: 14px;
    ul{
        width: 100%;
        height: 40px;
        li{
            position: relative;
            margin: 10px 0;
            .icon-tuichu-{
                position: absolute;
                right: 0;
                bottom: 0;
                color: #ffffff80;
            }
        }
    }
    h2{
        position: relative;
        .icon-lajitong{
            position: absolute;
            color: #ffffff80;
            right: 0;
            bottom: 0;
        }
    }
}
</style>